<template>
  <div class="checkup">
    <el-card class="list-form">
      <el-tabs v-model="tableName">
        <el-tab-pane name="1" label="按范围检测">
          <range-vue />
        </el-tab-pane>
        <el-tab-pane name="2" label="按商品检测">
          <goods-vue />
        </el-tab-pane>
        <el-tab-pane name="3" label="按商品ID检测">
          <id-vue />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card class="list-form">
      <el-row type="flex" align="middle" justify="space-between">
        <el-button style="height: 32px" size="small">立即检测</el-button>
        <div>
          <div class="check-time">上次检测时间：2024-07-02 16:26:03</div>
          <div class="check-time">检测商品数量：290 个</div>
          <div class="check-time">问题商品数量：290 个</div>
        </div>
        <div>
          <div class="">
            <img
              referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/SketchPngbf2e0efa3a45d415c693aab7aaf9a11c906751ddf689c44b2b902aa2f22e8c5c"
            >
            <div class="">
              <span class="text_146">商品不达标</span>
              <span class="text_147">0&nbsp;个商品</span>
            </div>
          </div>
          <div class="">
            <img
              referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/SketchPnga55fe33b58b84f5875ce63f5bed536dc0d927835201eb489f4e2b35a8afd9a83"
            >
            <div class="">
              <span class="text_148">标题不达标</span>
              <div class="text-wrapper_47">
                <span class="text_149">290</span>
                <span class="text_150">&nbsp;个商品</span>
              </div>
            </div>
          </div>
          <div class="">
            <img
              referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/SketchPng31598e7f181570633df07ff6140c54d707788217fa884a6525a3406446f5ed45"
            >
            <div class="">
              <span class="text_151">轮播图不达标</span>
              <div class="text-wrapper_48">
                <span class="text_152">290</span>
                <span class="text_153">&nbsp;个商品</span>
              </div>
            </div>
          </div>
          <div class="">
            <img
              referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/SketchPngdd4070f9c1b42f1f84ff72b3ec9786556d7126298e2f9cbbf51d81d796caa422"
            >
            <div class="">
              <span class="text_154">属性不达标</span>
              <div class="text-wrapper_49">
                <span class="text_155">290</span>
                <span class="text_156">&nbsp;个商品</span>
              </div>
            </div>
          </div>
          <div class="">
            <img
              referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/SketchPngac3ef7514c1cefb1222dd1b00c7ea09cb0475f2a8bed5bfc2395946e2e4bbcce"
            >
            <div class="">
              <span class="text_157">获取失败</span>
              <div class="text-wrapper_50">
                <span class="text_158">29</span>
                <span class="text_159">&nbsp;个商品</span>
              </div>
            </div>
          </div>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import GoodsVue from './components/goods.vue'
import IdVue from './components/id.vue'
import RangeVue from './components/range.vue'

export default {
  components: {
    GoodsVue,
    RangeVue,
    IdVue
  },
  data() {
    return {
      tableName: '1'
    }
  }
}
</script>

<style lang="scss" scoped>
.checkup {
  padding: 12px 20px 0;
  .list-form, .list-table {
    border-radius: 4px 4px 0 0;
  }
  ::v-deep .el-tabs__content {
    height: 160px;
  }
  .check-time {
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    &:not(:first-child) {
      margin-top: 8px;
    }
  }
}
</style>
